<template>
  <TableView class="table">
    <template #form>
      <NSpace justify="space-between">
        <NSpace align="center">
          姓名:
          <NInput v-model:value="paginationReactive.name" placeholder="请输入姓名" clearable class="commonWidth"></NInput>
          部门:
          <NSelect v-model:value="paginationReactive.deptId" clearable filterable placeholder="请选择部门"
            :render-option="renderOption" :options="(bbgDeptList as unknown as TreeSelectOption[])" key-field="value"
            label-field="name" />
          <NButton type="primary" style="width: 78rem" ghost @click="searchTable">
            查询
          </NButton>
        </NSpace>
      </NSpace>
    </template>

    <template #table="props">
      <NDataTable v-bind="props" :bordered="false" :columns="columns" :data="tableData" :pagination="false"
        :loading="tableLoading" :row-key="rowKeys" />
    </template>

    <template #pagination>
      <NPagination :page-sizes="paginationReactive.pageSizes" :item-count="paginationReactive.itemCount"
        :page="paginationReactive.page" :page-size="paginationReactive.pageSize"
        @update:page="paginationReactive.onChange" @update:page-size="paginationReactive.onUpdatePageSize"
        show-size-picker show-quick-jumper :suffix="() => '页'">
        <template #prefix>
          <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
        </template>
      </NPagination>
    </template>
  </TableView>

  <NModal :auto-focus="false" v-model:show="modalVisible" @close="modalVisible = false">
    <VDialogContent @close="modalVisible = false" @submit="recover" title="恢复提示">
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        您确定恢复该用户吗？
      </div>
    </VDialogContent>
  </NModal>
</template>
<script setup lang="ts">
import { h, reactive, onMounted, ref, watch, type VNode, onDeactivated } from 'vue'
import {
  NSpace,
  NButton,
  NDataTable,
  NPagination,
  NSelect,
  useMessage,
  NInput,
  NModal,
  NTooltip,
  type SelectOption
} from 'naive-ui'
import type { DataTableColumns, TreeSelectOption } from 'naive-ui'
import TableView from '@/components/TableView.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import type { UserModel } from '@/api/userCenter'
import { useRoute } from 'vue-router'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import { useViewerStore } from '@/views/OA/Common/store'
// import type { InstitutionTreeModel } from '@/api/sysInstitution'

const renderOption = ({ node, option }: { node: VNode; option: SelectOption }) => {
  return h(
    NTooltip,
    {
      placement: 'right'
    },
    {
      trigger: () => node,
      default: () => option.name
    }
  )
}

const useStore = useViewerStore()
const message = useMessage()
const route = useRoute()

const rowKeys: any = (e: any) => e.id || ''
const columns: DataTableColumns = [
  // {
  //   type: 'selection',
  //   fixed: 'left',
  //   width: 30,
  //   align: useStore.isCenter
  // },
  {
    title: '员工编号',
    key: 'userNumber',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '姓名',
    key: 'userName',
    width: 40,
    align: useStore.isCenter
  },
  // {
  //   title: '部门',
  //   key: 'deptName',
  //   width: 60,
  //   align: useStore.isCenter
  // },
  {
    title: '手机号',
    key: 'phone',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '身份证号',
    key: 'idNumber',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '性别',
    key: 'sex',
    width: 40,
    align: useStore.isCenter,
    render: ({ sex }) => (sex === 1 ? '男' : sex === 2 ? '女' : '')
  },
  {
    title: '电子邮箱',
    key: 'mail',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '删除时间',
    key: 'delTime',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '操作',
    key: 'action',
    align: useStore.isCenter,
    width: 60,
    fixed: 'right',
    render: (row: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: () => {
            recoverId.value = row.id
            modalVisible.value = true
          }
        },
        {
          default: () => '恢复'
        }
      )
    ]
  }
]
// 上一页下一页
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 50,
  deptId: null, //部门
  name: null, //姓名
  onChange: (page: number) => {
    paginationReactive.page = page
    getUnDeleteUserList()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    getUnDeleteUserList()
  }
})
// 恢复
const recoverId = ref()
const modalVisible = ref(false)
const recover = async () => {
  modalVisible.value = false
  tableLoading.value = true
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'userCenter',
    api: 'userRecoverlist',
    override: {
      params: {
        id: recoverId.value
      }
    }
  })
  if (error || res.code !== 0) return message.error('恢复失败'), (tableLoading.value = false)
  getUnDeleteUserList()
  message.success('恢复成功')
}
// // 部门
// const bbgDeptList: any = ref([])
// const getBbgDeptList = async () => {
//   const [error, res] = await sendRequest<HttpResponse>({
//     module: 'overTime',
//     api: 'BbgDeptList'
//   })
//   if (error || res.code !== 0) return
//   bbgDeptList.value = res.data
// }
// 获取列表
const tableData = ref([])
const tableLoading = ref(false)
const getUnDeleteUserList = async () => {
  tableLoading.value = true
  const [error, res] = await sendRequest<HttpResponse<UserModel>>({
    module: 'userCenter',
    api: 'userDeletelist',
    override: {
      params: {
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
        deptId: paginationReactive.deptId,
        name: paginationReactive.name
      }
    }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  tableData.value = []
  setTimeout(() => {
    tableData.value = res.data.list
    paginationReactive.itemCount = res.data.totalCount
  }, 0)
}
// 查询
const searchTable = () => {
  paginationReactive.page = 1
  getUnDeleteUserList()
}

// const treeOptions = shallowRef<InstitutionTreeModel[]>([])
// const treeLoading = ref(false)
// const queryTreeOptions = async () => {
//   try {
//     treeLoading.value = true
//     const [error, res] = await sendRequest<HttpResponse<InstitutionTreeModel[]>>({
//       module: 'sysInstitution',
//       api: 'getTree'
//     })

//     if (error) return message.error(error.message)
//     if (res.code !== 0) return message.error(res.msg)
//     treeOptions.value = res.data
//   } catch (error) {
//     console.log(error)
//   } finally {
//     treeLoading.value = false
//   }
// }
const bbgDeptList: any = ref([])
const getBbgDeptList = async () => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'overTime',
    api: 'BbgDeptList'
  })
  if (error) return message.error(error.message)
  bbgDeptList.value = res.data
}

watch(
  () => route,
  async () => {
    if (route.path == '/System/unDeleteUser') {
      await getUnDeleteUserList()
      window.addEventListener('keyup', keyUpDown, false)
    }
  },
  { deep: true, immediate: true }
)

onMounted(() => {
  // getBbgDeptList()
  getBbgDeptList()
})

const keyUpDown = (e: any) => e.key == 'Enter' && getUnDeleteUserList()

onDeactivated(() => {
  window.removeEventListener('keyup', keyUpDown, false)
})
</script>
<style scoped lang="scss">
.table {
  padding: 29rem 30rem 42rem;
}

.commonWidth {
  width: 150rem;
}
</style>
